{% extends 'layout/basic.html' %} {% load static %} {% block title %}用户短信登录{% endblock %} {% block css %}
<link rel="stylesheet" href="{% static 'css/account.css' %}">
<style>
    .error-msg {
        color: red;
        position: absolute;
        font-size: 12px;
    }
</style>
{% endblock %} {% block content %}
<div class="account">
    <div class="title">短信登录</div>
    <form id="smsForm" method="POST" novalidate>
        <!-- crsf安全认证 -->
        {% csrf_token %}
        <!-- 循环遍历表单中字段 -->
        {% for field in form %}
        <!-- 确定存在code字段 -->
        {% if field.name == 'code' %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            <div class="row">
                <div class="col-xs-7">
                    {{ field }}
                    <span class="error-msg"></span>
                </div>
                <div class="col-xs-5">
                    <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码">
                </div>
            </div>
        </div>
        {% else %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label> {{ field }}
            <span class="error-msg"></span>
        </div>
        {% endif %} {% endfor %}

        <div>
            <div style="float: right;">
                <a href="{% url 'web:login' %}">手机号邮箱登录?</a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-3">
                <input id="btnSubmit" type="button" class="btn btn-primary" value="登  录" />
            </div>
        </div>
    </form>
</div>

{% endblock %} 

{% block js %}
<script>
    // 页面框架加载完成之后自动执行函数
    $(function() {
        bindClickBtnSms();
        bindClickBtnSubmit();
    }) ;

    /*点击获取验证码按钮绑定事件*/
    function bindClickBtnSms() {
        $('#btnSms').click(function(){
            $('#btnSms').empty();
            // 获取用户输入的手机号
            // 根据手机号字段id值，获取手机号
            var mobilePhone = $('#id_mobile_phone').val();
            
            // 发送ajax请求，把手机号发送给后端
            /*
            $.ajax({
                "url":"/index/", // http://www.xx.com/index/?k1=123&k2=456
                "type":"GET",
                "data":{k1:123,k2:456},
                "success":function(res) {
                    // ajax请求发送成功之后，自动执行的函数；res就是后端返回的值

                }
            })
            */
            $.ajax({
                "url":"{% url 'web:send_sms' %}",
                "type":"GET",
                "data":{"mobile_phone":mobilePhone,"tpl":"login"},
                "dataType":"JSON", // 将服务器端返回的数据反序列化为字典
                "success":function(res) {
                    if (res.status) {
                        sendSmsRemind();
                    } else {
                        // 输出错误信息
                        console.log(res); // {status: false, error: {mobile_phone:["错误信息"]}}
                        $.each(res.error,function(key,value){
                            $('#id_'+key).next().text(value[0]);
                        })
                    }
                    
                }
            })

        })
        /*倒计时*/
        function sendSmsRemind() {
            var $btnSms = $('#btnSms');

            $btnSms.prop('disabled',true);

            var time = 60;
            var remind = setInterval(function(){
                $btnSms.val(time + "秒后重新发送");
                time--;
                if(time < 1) {
                    clearInterval(remind);
                    $btnSms.val('点击获取验证码').prop('disabled',false);
                }
            },1000)
        }
    }
    /*点击提交（登录）*/
    function bindClickBtnSubmit() {
        $('#btnSubmit').click(function() {
            // 清空所有的错误信息
            $('.error-msg').empty();
            // 收集表单中数据
            // $('#regForm').serialize(); // 所有字段的数据 + csrf token验证
            // 通过ajax请求把数据发送给后台
            $.ajax({
                "url":"{% url 'web:login_sms' %}",
                "type":"POST",
                "data":$('#smsForm').serialize(), // 所有字段的数据 + csrf token验证
                "dataType":"JSON",
                "success":function(res) {
                    if (res.status) {
                        location.href = res.data;
                    }else {
                        // 输出错误信息
                        console.log(res); // {status: false, error: {mobile_phone:["错误信息"]}}
                        $.each(res.error,function(key,value){
                            $('#id_'+key).next().text(value[0]);
                        })
                    }
                }
            })
        })
    }


</script>

{% endblock %}